<template>
  <div class="ant-pagination">
    {{start}}-{{end}}共{{total}}条
    <a-button :disabled="currentPage === 1" @click="changePage(currentPage - 1)" class="ant-pagination-button">
      <a-icon type="left" />
    </a-button>
    <div class="ant-pagination-list">
      <a-button v-if="showFirstDots && currentPage > 3" @click="changePage(1)" shape="round" class="ant-pagination-item">1</a-button>
      <a-button v-if="showFirstDots && currentPage > 4" disabled shape="round" class="ant-pagination-item ant-pagination-item-disabled">...</a-button>
      <a-button v-for="page in pages" :key="page"
                :class="{ 'ant-pagination-item': true, 'ant-pagination-item-active': page === currentPage}"
                @click="changePage(page)" shape="round">{{ page }}</a-button>
      <a-button v-if="showLastDots && currentPage < totalPage - 3" disabled shape="round" class="ant-pagination-item ant-pagination-item-disabled">...</a-button>
      <a-button v-if="showLastDots && currentPage < totalPage - 2" @click="changePage(totalPage)" shape="round" class="ant-pagination-item">{{ totalPage }}</a-button>
    </div>
    <a-button :disabled="currentPage === totalPage" @click="changePage(currentPage + 1)" class="ant-pagination-button">
      <a-icon type="right" />
    </a-button>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    totalPage: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true,
      default: 0
    },
    pageSize: {
      type: Number,
      required: false,
      default: 10
    },
    visiblePages: {
      type: Number,
      required: false,
      default: 5
    }
  },
  computed: {
    count() {
      return Math.ceil(this.totalPage / this.visiblePages)
    },
    start() {
      return (this.currentPage - 1) * this.visiblePages + 1
    },
    end() {
      const num = this.currentPage * this.visiblePages
      return num > this.total ? this.total : num
    },
    pages () {
      let pages = []

      let startPage = Math.max(1, this.currentPage - Math.floor(this.visiblePages / 2))
      let endPage = Math.min(this.totalPage, startPage + this.visiblePages - 1)

      for (let i = startPage; i <= endPage; i++) {
        pages.push(i)
      }

      this.showFirstDots = startPage > 2
      this.showLastDots = endPage < this.totalPage - 1

      return pages
    }
  },
  data () {
    return {
      showFirstDots: false,
      showLastDots: false
    }
  },
  methods: {
    changePage (page) {
      if (page < 1 || page > this.totalPage) return
      this.$emit('page-change', page)
    }
  }
}
</script>

<style scoped lang="less">

  .ant-pagination {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .ant-pagination .ant-pagination-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .ant-pagination .ant-pagination-item {
    //margin: 0 5px;
  }

  .ant-pagination .ant-pagination-item-active {
    background-color: #fff;
    border-color: #1890ff;
    color: #1890ff;
    border-width: 1px;
    border-style: solid;
  }

  .ant-pagination .ant-pagination-item:hover:not(.ant-pagination-item-active) {
    //background-color: #e6f7ff;
  }

  .ant-pagination .ant-pagination-item-disabled {
    cursor: not-allowed;
    //opacity: 0.65;
    //filter: alpha(opacity=65);
    border-color: #d9d9d9 !important;
    color: rgba(0, 0, 0, 0.25);
    background-color: none;
  }
  .ant-pagination-button,
  .ant-pagination-item {
    //width: 24px;
    height: 24px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    box-shadow: none;
    min-width: 24px;
    margin: 0;
  }
</style>
